<template>
  <div class="workbench">
    <a-row :gutter="[8, 8]">
      <a-col :span="12">
        <a-card style="height: 215px; padding: 10px" :hoverable="true">
          <div style="" class="heads">
            <span style="flex: 1"> 到期提醒合同面积 </span>
          </div>
          <div style="font-weight: 600; margin-bottom: 50px; font-size: 20px">
            <span>{{ returnDataList.expireArea }}</span
            >m²
          </div>
          <div style="display: flex">
            <span style="flex: 1">
              到期提醒合同: <span>{{ returnDataList.expireCount }}份</span>
            </span>
          </div>
          <div
            style="
              width: 100%;
              padding: 0 5px;
              margin-bottom: 10px;
              margin-top: 10px;
            "
          >
            <div class="linear"></div>
          </div>
          <div style="margin-bottom: 20px">
            到期未处理合同份数: {{ returnDataList.overdueCount }}份
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 215px; padding: 10px" :hoverable="true">
          <div style="" class="heads">
            <span style="flex: 1"> 全年退租合同 </span>
          </div>
          <div style="margin-bottom: 82px">
            <span style="font-weight: 600; font-size: 20px">{{
              retreatStaticList.totalCount
            }}</span>
            <span>份</span>
          </div>
          <div style="width: 100%; padding: 0 5px; margin-bottom: 10px">
            <div class="linear"></div>
          </div>
          <div style="margin-bottom: 20px">
            全年退租合同面积: {{ retreatStaticList.totalArea }}m²
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">月出租率走势 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerMonthly, pickerMonthly]"
              v-model:value="monthlyMoment"
              :allowClear="false"
              @change="monthlyEcharts"
            />
          </a-col>
          <div id="monthlyEcharts2" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">成交走势 </a-col>
          <a-col style="margin: 10px 0">
            <a-date-picker
              v-model:value="transactionYear"
              picker="year"
              placeholder="请选择年份"
              @change="onTransactionYearChange"
              format="YYYY年"
              :allowClear="false"
              :disabledDate="disabledYear"
            />
          </a-col>
          <div id="transactionTrend" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">租金实时单价分布 </a-col>
          <div id="rentDistribution" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">合同跟进分布</a-col>
          <div id="contractDistribution" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">合同到期分布 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerContract, pickerContract]"
              v-model:value="IndustryMoment"
              :allowClear="false"
              @change="contractExpire"
            />
          </a-col>
          <div id="contractExpire2" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">租期结构分析 </a-col>
          <div
            id="structuralAnalysis"
            style="padding-right: 100px"
            class="chart"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">合同面积分布 </a-col>
          <div
            id="areaDistribution"
            style="padding-right: 100px; margin-top: 45px"
            class="chart"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">退租租客行业占比 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerIndustry, pickerIndustry]"
              v-model:value="tenantMoment"
              :allowClear="false"
              @change="tenantIndustry"
            />
          </a-col>
          <div
            id="tenantIndustry"
            style="padding-right: 100px"
            class="chart"
            v-show="tenantList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="tenantList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">退租原因分析 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerWithdrawal, pickerWithdrawal]"
              v-model:value="withdrawalMoment"
              :allowClear="false"
              @change="withdrawalAnalysis"
            />
          </a-col>
          <div
            id="withdrawalAnalysis"
            class="chart"
            style="padding-right: 100px"
            v-show="withdrawalList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="withdrawalList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">退租走势 </a-col>
          <a-col style="margin: 10px 0">
            <a-date-picker
              v-model:value="retreatYear"
              picker="year"
              placeholder="请选择年份"
              @change="onRetreatYearChange"
              format="YYYY年"
              :allowClear="false"
              :disabledDate="disabledYear"
            />
          </a-col>
          <div id="withdrawalTrend" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">提前退租率 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerEarly, pickerEarly]"
              v-model:value="earlyMoment"
              :allowClear="false"
              @change="earlySurrender"
            />
          </a-col>
          <div id="earlySurrender" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head" style="margin-bottom: 10px"
            >合同到期续租走势
          </a-col>
          <a-date-picker
            v-model:value="renewalYear"
            picker="year"
            placeholder="请选择年份"
            @change="onRenewalYearChange"
            format="YYYY年"
            :allowClear="false"
            :disabledDate="disabledYear"
          />
          <div id="renewalTrend" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">续租率 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerRenewal, pickerRenewal]"
              v-model:value="renewalMoment"
              :allowClear="false"
              @change="renewalRate"
            />
          </a-col>
          <div id="renewalRate" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">增长率 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerGrowth, pickerGrowth]"
              v-model:value="growthMoment"
              :allowClear="false"
              @change="growthRate"
            />
          </a-col>
          <div id="growthRate" class="chart"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  reactive,
} from "vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
const dateFormat = "YYYY-MM-DD";
import { Empty, Modal, Progress } from "ant-design-vue";
export default defineComponent({
  name: "homeLeaseOverview",
  components: {
    QuestionCircleOutlined,
    Empty,
  },
  setup() {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    // 到期提醒合同面积
    const returnDataList = ref({});
    const expirationReminder = () => {
      request.get("/org", "/lease/contractExpire").then((res) => {
        returnDataList.value = res.returnData;
      });
    };
    expirationReminder();

    // 全年退租合同统计
    const retreatStaticList = ref({});
    const retreatStatic = () => {
      request.get("/org", "/lease/retreatStatic").then((res) => {
        retreatStaticList.value = res.returnData;
      });
    };
    retreatStatic();

    // 月出租率走势 Echarts
    const chartMonthly = {};
    const pickerMonthly = ref("date");
    const monthlyMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyEcharts = () => {
      if (!chartMonthly.chart1) {
        chartMonthly.chart1 = new Chart({
          container: "monthlyEcharts2",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartMonthly.chart1.scale({
          rentalRate: {
            min: 0,
            nice: true,
          },
        });
        chartMonthly.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });

        chartMonthly.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        chartMonthly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartMonthly.chart1.axis("rentalRate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartMonthly.chart1.axis("monthDate", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartMonthly.chart1
          .area()
          .position("monthDate*rentalRate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartMonthly.chart1
          .line()
          .position("monthDate*rentalRate")
          .color("name")
          .shape("smooth");
        chartMonthly.chart1.legend(false);
      }
      request
        .get("/org", "/board/monthRentalRate", {
          start_time: monthlyMoment.value[0].format(dateFormat),
          end_time: monthlyMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          chartMonthly.chart1.changeData(res.list);
          chartMonthly.chart1.render();
        });
    };

    //成交走势
    const chartTransaction = {};
    const pickerTransaction = ref("date");
    const transactionYear = ref(moment());
    const onTransactionYearChange = (date, dateString) => {
      transactionTrend();
    };
    const transactionTrend = () => {
      if (!chartTransaction.chart1) {
        chartTransaction.chart1 = new Chart({
          container: "transactionTrend",
          autoFit: true,
          height: 500,
          padding: [80],
        });
        chartTransaction.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
          date: {
            tickCount: 20,
          },
        });
        chartTransaction.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        chartTransaction.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });
        chartTransaction.chart1.annotation().text({
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -355,
          offsetX: -18,
        });
        chartTransaction.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartTransaction.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartTransaction.chart1.legend({
          position: "top-right",
        });

        chartTransaction.chart1
          .line()
          .position("date*total")
          .color("name")
          .shape("smooth");

        chartTransaction.chart1
          .area()
          .position("date*total")
          // .color("l(90) 0:#5b8df7 1:#fbfdff")
          .color("name")
          .shape("smooth");
      }
      request
        .get("/org", "/source/dealTread", {
          year: transactionYear.value.year(),
        })
        .then((res) => {
          chartTransaction.chart1.changeData(res.list);
          chartTransaction.chart1.render();
        });
    };

    // 租金实时单价分布
    const rentDistribution = () => {
      let data = [];
      if (!chartTransaction.chart2) {
        chartTransaction.chart2 = new Chart({
          container: "rentDistribution",
          autoFit: true,
          height: 500,
          padding: [90],
        });
      }

      request.get("/org", "/lease/realRentSpread").then((res) => {
        console.log(res.list);
        data = res.list;
        chartTransaction.chart2.data(data);
        chartTransaction.chart2.scale({
          lease_area: {
            min: 0,
            nice: true,
          },
        });

        chartTransaction.chart2.axis("lease_real_unit_price", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        // chart.axis("sales", {
        //   label: {
        //     formatter: (val) => {
        //       return val.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
        //     },
        //   },
        // });

        chartTransaction.chart2.annotation().text({
          position: ["102%", "100%"],
          content: "元/m²·天",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 685,
        });
        chartTransaction.chart2.annotation().text({
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -340,
          offsetX: -19,
        });

        chartTransaction.chart2.tooltip({
          showMarkers: false,
        });
        chartTransaction.chart2.interaction("active-region");

        chartTransaction.chart2
          .interval()
          .position("lease_real_unit_price*lease_area")
          .color("name")
          .style({ radius: [20, 20, 0, 0] })
          .size(20);

        chartTransaction.chart2.legend(false);
        chartTransaction.chart2.render();
      });
    };

    // 合同跟进分布
    const contractDistribution = () => {
      let data = [];
      if (!chartTransaction.chart3) {
        chartTransaction.chart3 = new Chart({
          container: "contractDistribution",
          autoFit: true,
          height: 500,
          padding: [90, 150],
        });
      }

      request.get("/org", "/lease/followupSpread").then((res) => {
        console.log(res);
        data = res.list;
        chartTransaction.chart3.data(data);

        chartTransaction.chart3.scale({
          total: {
            min: 0,
            nice: true,
          },
        });
        chartTransaction.chart3.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offset: 5,
            offsetX: -10,
          },
        });
        chartTransaction.chart3.coordinate().transpose();

        chartTransaction.chart3.tooltip({
          showMarkers: false,
        });
        chartTransaction.chart3.annotation().text({
          content: "跟进人",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -335,
          offsetX: -18,
        });
        chartTransaction.chart3.annotation().text({
          position: ["103%", "100%"],
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
        });
        chartTransaction.chart3.axis({
          label: {
            rotate: -1,
          },
        });
        chartTransaction.chart3.tooltip({
          showMarkers: false,
        });
        chartTransaction.chart3.legend(false);
        chartTransaction.chart3.interaction("active-region");
        chartTransaction.chart3
          .interval()
          .position("followup_uname*followup_uid")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        chartTransaction.chart3.render();
      });
    };

    // 合同到期分布
    const contracMonthly = {};
    const pickerContract = ref("date");
    const IndustryMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const contractExpire = () => {
      if (!contracMonthly.chart1) {
        contracMonthly.chart1 = new Chart({
          container: "contractExpire2",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        contracMonthly.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        contracMonthly.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        contracMonthly.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });
        contracMonthly.chart1.annotation().text({
          content: "份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -18,
        });
        contracMonthly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        contracMonthly.chart1.tooltip({
          showMarkers: false,
        });
        contracMonthly.chart1.interaction("active-region");

        contracMonthly.chart1
          .interval()
          .position("date*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        contracMonthly.chart1.legend(false);
      }
      request
        .get("/org", "/board/overdueContractSpread", {
          start_date: IndustryMoment.value[0].format(dateFormat),
          end_date: IndustryMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          contracMonthly.chart1.changeData(res.list);
          contracMonthly.chart1.render();
        });
    };

    // 租期结构分析
    const structuralAnalysis = () => {
      let data = [];
      request.get("/org", "/lease/leaseTermSpread").then((res) => {
        data = res.list;
        if (!contracMonthly.chart2) {
          contracMonthly.chart2 = new Chart({
            container: "structuralAnalysis",
            autoFit: true,
            width: 700,
            height: 500,
            padding: [80, 220, 80, 0],
          });
        }

        // 新建一个 view 用来单独渲染Annotation
        contracMonthly.chart2.coordinate("theta", {
          radius: 0.55,
          innerRadius: 0.8,
        });

        contracMonthly.chart2.data(data);

        contracMonthly.chart2.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        contracMonthly.chart2
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["50%", "50%"],
            content: res.totals,
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          })
          .text({
            position: ["50%", "50%"],
            content: "份",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: 10,
            offsetX: 20,
          });

        // 声明需要进行自定义图例字段： 'item'
        contracMonthly.chart2.legend("groupName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.groupName + `     ` + obj.groupNum, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                style: {
                  r: 5, // marker 图形半径
                  fill: contracMonthly.chart2.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        contracMonthly.chart2
          .interval()
          .adjust("stack")
          .position("percent")
          .color("groupName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        contracMonthly.chart2.removeInteraction("legend-filter");
        contracMonthly.chart2.interaction("element-active");

        contracMonthly.chart2.render();
      });
    };

    // 合同面积分布
    const areaDistribution = () => {
      let data = [];
      request.get("/org", "/lease/contractAreaSpread").then((res) => {
        data = res.list;
        if (!contracMonthly.chart3) {
          contracMonthly.chart3 = new Chart({
            container: "areaDistribution",
            autoFit: true,
            width: 700,
            height: 500,
            padding: [130, 220, 80, 0],
          });
        }

        // 新建一个 view 用来单独渲染Annotation
        contracMonthly.chart3.coordinate("theta", {
          radius: 0.61,
          innerRadius: 0.8,
        });

        contracMonthly.chart3.data(data);

        contracMonthly.chart3.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        contracMonthly.chart3
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["50%", "50%"],
            content: res.totals,
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          })
          .text({
            position: ["50%", "50%"],
            content: "份",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetY: 10,
            offsetX: 34,
          });

        // 声明需要进行自定义图例字段： 'item'
        contracMonthly.chart3.legend("groupName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.groupName + `   ` + obj.groupNum, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                style: {
                  r: 5, // marker 图形半径
                  fill: contracMonthly.chart3.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        contracMonthly.chart3
          .interval()
          .adjust("stack")
          .position("percent")
          .color("groupName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        contracMonthly.chart3.removeInteraction("legend-filter");
        contracMonthly.chart3.interaction("element-active");

        contracMonthly.chart3.render();
      });
    };

    // 退租租客行业占比
    const chartIndustry = {};
    const pickerIndustry = ref("date");
    const tenantMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const tenantList = ref([]);
    const tenantIndustry = () => {
      if (!chartIndustry.chart1) {
        chartIndustry.chart1 = new Chart({
          container: "tenantIndustry",
          autoFit: true,
          width: 700,
          height: 500,
          padding: [20, 220, 0, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        chartIndustry.chart1.coordinate("theta", {
          radius: 0.38,
          innerRadius: 0.8,
        });
      }
      request
        .get("/org", "/lease/ownerIndustryRatio", {
          start_date: tenantMoment.value[0].format(dateFormat),
          end_date: tenantMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          tenantList.value = res.list;
          chartIndustry.chart1.changeData(res.list);
          chartIndustry.chart1.tooltip({
            showCrosshairs: false,
            shared: false,
            showMarkers: false,
          });

          chartIndustry.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "m²",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });

          // 声明需要进行自定义图例字段： 'item'
          chartIndustry.chart1.legend("industryName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.industryName + obj.totalArea, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  style: {
                    r: 5, // marker 图形半径
                    fill: chartIndustry.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          chartIndustry.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("industryName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          chartIndustry.chart1.removeInteraction("legend-filter");
          chartIndustry.chart1.interaction("element-active");
          chartIndustry.chart1.render();
        });
    };

    // 退租原因分析
    const chartWithdrawal = {};
    const pickerWithdrawal = ref("date");
    const withdrawalMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const withdrawalList = ref([]);
    const withdrawalAnalysis = () => {
      if (!chartWithdrawal.chart1) {
        chartWithdrawal.chart1 = new Chart({
          container: "withdrawalAnalysis",
          autoFit: true,
          width: 700,
          height: 500,
          padding: [80, 220, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        chartWithdrawal.chart1.coordinate("theta", {
          radius: 0.55,
          innerRadius: 0.8,
        });
      }
      request
        .get("/org", "/board/retreatAnalyse", {
          start_date: withdrawalMoment.value[0].format(dateFormat),
          end_date: withdrawalMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          withdrawalList.value = res.list;
          chartWithdrawal.chart1.changeData(res.list);
          chartWithdrawal.chart1.tooltip({
            showCrosshairs: false,
            shared: false,
            showMarkers: false,
          });

          // 声明需要进行自定义图例字段： 'item'
          chartWithdrawal.chart1.legend("name", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.name + obj.total, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  style: {
                    r: 5, // marker 图形半径
                    fill: chartWithdrawal.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          chartWithdrawal.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("name")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          chartWithdrawal.chart1.removeInteraction("legend-filter");
          chartWithdrawal.chart1.interaction("element-active");
          chartWithdrawal.chart1.render();
        });
    };

    // 退租走势
    const retreatYear = ref(moment());
    const onRetreatYearChange = (date, dateString) => {
      withdrawalTrend();
    };

    const withdrawalChart = {};
    const withdrawalTrend = () => {
      if (!withdrawalChart.chart1) {
        withdrawalChart.chart1 = new Chart({
          container: "withdrawalTrend",
          autoFit: true,
          height: 500,
          padding: [80, 70],
        });
        withdrawalChart.chart1.scale({
          total: {
            // max: 600,
            min: 0,
            nice: true,
          },
          date: {
            tickCount: 20,
          },
        });
        withdrawalChart.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        withdrawalChart.chart1.annotation().text({
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -360,
          offsetX: -19,
        });
        withdrawalChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        withdrawalChart.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        withdrawalChart.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        withdrawalChart.chart1
          .area()
          .position("date*total")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        withdrawalChart.chart1
          .line()
          .position("date*total")
          .shape("smooth")
          .color("name");
        withdrawalChart.chart1.legend(false);
      }
      request
        .get("/org", "/lease/retreadTrend", {
          year: retreatYear.value.year(),
        })
        .then((res) => {
          res.list.forEach((item) => {
            item.total = Number(item.total);
          });
          withdrawalChart.chart1.changeData(res.list);
          withdrawalChart.chart1.render();
        });
    };

    // 提前退租率
    const chartEarly = {};
    const pickerEarly = ref("date");
    const earlyMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const earlySurrender = () => {
      if (!chartEarly.chart1) {
        chartEarly.chart1 = new Chart({
          container: "earlySurrender",
          autoFit: true,
          height: 500,
          padding: [80],
        });
        chartEarly.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
          month: {
            tickCount: 20,
          },
        });
        chartEarly.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        chartEarly.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -360,
          offsetX: -17,
        });
        chartEarly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 700,
        });

        chartEarly.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartEarly.chart1.axis("month", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartEarly.chart1
          .area()
          .position("month*total")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartEarly.chart1
          .line()
          .position("month*total")
          .shape("smooth")
          .color("name");
        chartEarly.chart1.legend(false);
      }
      request
        .get("/org", "/lease/advanceRetread", {
          startDate: earlyMoment.value[0].format(dateFormat),
          endDate: earlyMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          chartEarly.chart1.changeData(res.list);
          chartEarly.chart1.render();
        });
    };

    // 合同到期续租走势
    const renewalYear = ref(moment());
    const onRenewalYearChange = (date, dateString) => {
      renewalTrend();
    };
    const renewalTrend = (date) => {
      if (!chartEarly.chart2) {
        chartEarly.chart2 = new Chart({
          container: "renewalTrend",
          autoFit: true,
          height: 500,
          padding: [80],
        });
      }

      request
        .get("/org", "/lease/contractRenewal", {
          year: renewalYear.value.year(),
        })
        .then((res) => {
          chartEarly.chart2.data(res.list);
          chartEarly.chart2.scale({
            total: {
              // max: 500,
              min: 0,
              nice: true,
            },
            month: {
              tickCount: 20,
            },
          });
          chartEarly.chart2.tooltip({
            showCrosshairs: true,
            shared: false,
          });
          chartEarly.chart2.annotation().text({
            content: "m²",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -360,
            offsetX: -17,
          });
          chartEarly.chart2.annotation().text({
            position: ["102%", "100%"],
            content: "月份",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            // offsetY: 0,
            // offsetX: 700,
          });

          chartEarly.chart2.axis("total", {
            animate: true,
            label: {
              formatter: (val) => {
                return +val;
              },
            },
          });

          chartEarly.chart2.axis("month", {
            label: {
              rotate: -1,
              offset: 30,
            },
            tickLine: null,
          });

          chartEarly.chart2
            .area()
            .position("month*total")
            .color("l(90) 0:#5b8df7 1:#fbfdff")
            .shape("smooth");
          chartEarly.chart2
            .line()
            .position("month*total")
            .shape("smooth")
            .color("name");
          chartEarly.chart2.legend(false);
          chartEarly.chart2.render();
        });
    };

    // 续租率
    const chartRenewal = {};
    const pickerRenewal = ref("date");
    const renewalMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const renewalRate = () => {
      if (!chartRenewal.chart1) {
        chartRenewal.chart1 = new Chart({
          container: "renewalRate",
          autoFit: true,
          height: 500,
          padding: [80],
        });
        chartRenewal.chart1.scale({
          rate: {
            max: 100,
            min: 0,
            nice: true,
          },
          month: {
            tickCount: 20,
          },
        });
        chartRenewal.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        chartRenewal.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -360,
          offsetX: -17,
        });
        chartRenewal.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 700,
        });

        chartRenewal.chart1.axis("rate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartRenewal.chart1.axis("month", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartRenewal.chart1
          .area()
          .position("month*rate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartRenewal.chart1
          .line()
          .position("month*rate")
          .shape("smooth")
          .color("name");
        chartRenewal.chart1.legend(false);
      }
      request
        .get("/org", "/lease/renewalRate", {
          startDate: renewalMoment.value[0].format(dateFormat),
          endDate: renewalMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          chartRenewal.chart1.changeData(res.list);
          chartRenewal.chart1.render();
        });
    };

    // 增长率
    const chartGrowth = {};
    const pickerGrowth = ref("date");
    const growthMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const growthRate = () => {
      if (!chartGrowth.chart1) {
        chartGrowth.chart1 = new Chart({
          container: "growthRate",
          autoFit: true,
          height: 500,
          padding: [80],
        });
        chartGrowth.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        chartGrowth.chart1.axis("month", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartGrowth.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -360,
          offsetX: -15,
        });
        chartGrowth.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 700,
        });

        chartGrowth.chart1.tooltip({
          showMarkers: false,
          shared: false,
        });
        chartGrowth.chart1.interaction("active-region");
        chartGrowth.chart1
          .interval()
          .position("month*total")
          .style({ radius: [20, 20, 20, 20] })
          .size(10)
          .color("name", (val) => {
            if (val == "流失率") {
              return "red";
            }
            return "#5b8ff9";
          })
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.5,
            },
          ]);

        chartGrowth.chart1.legend({
          position: "top-right",
        });
      }
      request
        .get("/org", "/lease/growthRate", {
          startDate: growthMoment.value[0].format(dateFormat),
          endDate: growthMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          chartGrowth.chart1.changeData(res.list);
          chartGrowth.chart1.render();
        });
    };

    onMounted(() => {
      monthlyEcharts();
      transactionTrend();
      rentDistribution();
      contractDistribution();
      contractExpire();
      structuralAnalysis();
      areaDistribution();
      tenantIndustry();
      withdrawalAnalysis();
      withdrawalTrend();
      earlySurrender();
      renewalTrend();
      renewalRate();
      growthRate();
    });

    onUnmounted(() => {
      if (chartMonthly.chart1) {
        chartMonthly.chart1.destroy();
      }
      if (chartTransaction.chart1) {
        chartTransaction.chart1.destroy();
      }
      if (chartTransaction.chart2) {
        chartTransaction.chart2.destroy();
      }
      if (chartTransaction.chart3) {
        chartTransaction.chart3.destroy();
      }
      if (contracMonthly.chart1) {
        contracMonthly.chart1.destroy();
      }
      if (contracMonthly.chart2) {
        contracMonthly.chart2.destroy();
      }
      if (contracMonthly.chart3) {
        contracMonthly.chart3.destroy();
      }
      if (chartIndustry.chart1) {
        chartIndustry.chart1.destroy();
      }
      if (chartWithdrawal.chart1) {
        chartWithdrawal.chart1.destroy();
      }
      if (withdrawalChart.chart1) {
        withdrawalChart.chart1.destroy();
      }
      if (chartEarly.chart1) {
        chartEarly.chart1.destroy();
      }
      if (chartEarly.chart2) {
        chartEarly.chart2.destroy();
      }
      if (chartRenewal.chart1) {
        chartRenewal.chart1.destroy();
      }
      if (chartGrowth.chart1) {
        chartGrowth.chart1.destroy();
      }
    });

    const disabledYear = (current) => {
      return current > moment().endOf("year");
    };

    return {
      returnDataList,
      retreatStaticList,
      dateFormat,
      pickerMonthly,
      monthlyMoment,
      monthlyEcharts,
      transactionTrend,
      pickerTransaction,
      IndustryMoment,
      contractExpire,
      pickerContract,
      tenantMoment,
      tenantList,
      tenantIndustry,
      pickerIndustry,
      simpleImage,
      withdrawalList,
      withdrawalMoment,
      withdrawalAnalysis,
      pickerWithdrawal,
      earlyMoment,
      pickerEarly,
      earlySurrender,
      renewalMoment,
      renewalRate,
      pickerRenewal,
      growthMoment,
      growthRate,
      pickerGrowth,
      transactionYear,
      onTransactionYearChange,
      retreatYear,
      onRetreatYearChange,
      renewalYear,
      onRenewalYearChange,
      disabledYear,
    };
  },
});
</script>

<style lang="less" scoped>
.heads {
  margin-bottom: 10px;
  display: flex;
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.Line {
  width: 100%;
  height: 2px;
  background-color: #e7eaed;
}
.lineText {
  top: -12px;
  left: 48%;
  background-color: #f0f2f5;
  padding: 0 10px;
}
.chart-box {
  // height: 400px;
  background: #fff;
  padding: 10px;
  width: 49.5%;
}
.head {
  font-size: 18px;
  font-weight: 600;
}
.workbench {
  padding: 10px;
}
:deep(.ant-card-body){
  padding: 0px;
}
</style>
